<script setup>
import { User, Lock } from '@element-plus/icons-vue'
import { ref } from 'vue'
import UserInformationForm from '../components/UserInformationForm.vue'
import loginImage from '@/assets/images/login.svg';
//控制注册与登录表单的显示， 默认显示注册
const isRegister = ref(false)

</script>

<template>
    <el-row class="login-page">
        <el-col :span="12" class="bg" style="pointer-events: none;">
            <div class=" image-container">
                <el-image :src="loginImage" :fit="fit" class="centered-image" />
            </div>
        </el-col>
        <el-col :span="6" :offset="3" class="form">
            <!-- 登录表单 -->
            <el-form ref="form" size="large" autocomplete="off">
                <el-form-item>
                    <h1>管理员登录</h1>
                </el-form-item>
                <el-form-item>
                    <el-input :prefix-icon="User" placeholder="请输入用户名" v-model="userLoginInput.username"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-input name="password" :prefix-icon="Lock" type="password" placeholder="请输入密码"
                        v-model="userLoginInput.userpassword"></el-input>
                </el-form-item>

                <!-- 登录按钮 -->
                <el-form-item>
                    <el-button class="button" type="primary" :disabled="logInButton" auto-insert-space
                        @click="checkUser()">登录</el-button>
                </el-form-item>
                <el-form-item class="flex">
                    <div class="flex">
                        <router-link :to="{ name: 'Login' }">
                            <el-link type="info" :underline="false" @click="isRegister = true">
                                返回 →
                            </el-link>
                        </router-link>
                    </div>
                </el-form-item>
            </el-form>
        </el-col>
    </el-row>
</template>

<style lang="scss" scoped>
/* 样式 */
.login-page {
    height: 100vh;
    background-color: #fff;

    // .bg {
    //     background: url('@/assets/logo2.png') no-repeat 60% center / 240px auto,
    //         url('@/assets/login_bg.jpg') no-repeat center / cover;
    //     border-radius: 0 20px 20px 0;
    // }

    .form {
        display: flex;
        flex-direction: column;
        justify-content: center;
        user-select: none;

        .title {
            margin: 0 auto;
        }

        .button {
            width: 100%;
        }

        .flex {
            width: 100%;
            display: flex;
            justify-content: space-between;
        }
    }
}
</style>
<script>
export default {
    data() {
        return {
            userLoginInput: {
                username: "",
                userpassword: "",
            },
            Alert: "",
            logInButton: true,
            fit: 'contain',
        }

    },
    computed: {
        // 计算属性，根据表单完整性动态计算按钮禁用状态
        logInButton() {
            return !this.isFormComplete(this.userLoginInput);
        }
    },
    watch: {
        userLoginInput: {
            deep: true, // 深度监听对象内部属性的变化
            handler(newVal) {
                // 检查 userSignUpInput 中所有字段是否都不为空
                this.logInButton = !this.isFormComplete(newVal);
            }
        }
    },
    methods: {
        handleLogin(event) {
            // 登录请求
            if (event) {
                sessionStorage.setItem('isManagementAuthenticated', 'true');
                this.$router.push({ name: 'ManagementPage' });
            } else {
                alert('用户名或密码错误');
            }
        },
        checkUser() {
            this.$axios.post('index.php/Management/adminLogin', this.userLoginInput)
                .then(response => {
                    // 处理成功的响应
                    this.message = response.data; // 假设响应数据是简单的消息
                    console.log(response.data.status);
                    this.handleLogin(response.data.status); // 根据需要进行进一步处理
                })
                .catch(error => {
                    // 处理错误
                    console.error('There was an error!', error);
                    this.message = 'Error: ' + error.message;
                });
        },
        isFormComplete(formData) {
            // 检查表单数据是否完整，即所有字段都不为空
            for (let key in formData) {
                if (!formData[key]) {
                    return false; // 有任何一个字段为空，返回 false
                }
            }
            return true; // 所有字段都不为空，返回 true
        },
        submitForm() {
            // 提交表单的逻辑
            console.log('Form submitted');
        },




    }

}
</script>
<style scoped>
.bg {
  background-color: #f0f0f0; /* 设置背景颜色 */
  height: 100vh; /* 高度占满整个视口 */
  display: flex; /* 使用 Flexbox 布局 */
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
}

.image-container {
  position: relative; /* 设置相对定位 */
}

.centered-image {
  pointer-events: none; /* 禁止鼠标事件 */
}
</style>